<template>
  <div>
    <el-button type="warning" @click="add">添加</el-button>
    <el-button type="danger">批量删除</el-button>
    <!-- 表格 -->
    <role-form
      :rolelist="rolelist"
      @getlist="getlist"
      @editrole="editrole"
    ></role-form>
    <!-- 弹出框 -->
    <role-add
      :popup="popup"
      ref="child"
      :menulist="menulist"
      @getlist="getlist"

    ></role-add>
  </div>
</template>

<script>
import roleForm from "./components/rolelist.vue";
import roleAdd from "./components/addrole.vue";
export default {
  props: {},
  data() {
    return {
      rolelist: [], // 角色列表
      popup: {
        flag: false, // 弹出框状态
      },
      menulist: [],
    };
  },
  computed: {},
  created() {
    this.getlist();
  },
  mounted() {},
  watch: {

  },
  methods: {
    getlist() {
      // 获取角色列表
      this.$api
        .getrolelist()
        .then((res) => {
          this.rolelist = res.data.list;
        })
        .catch((err) => console.log(err));
    },
    add() {
      // 弹出框状态
      this.popup.flag = true;

    },
    editrole(obj) { // 编辑
      // console.log(obj);
      let menu = this.$refs.child.menulist
      // console.log(menu);
      let  arr =  obj.menus.split(',')
      menu.forEach(item=>{
        arr.forEach((val,index)=>{
          if(val == item.id && item.children){
            arr.splice(index,1)
          }
        })
      })
      this.$refs.child.keysId.keysIdArr = arr
      obj.menus =arr;
      this.$refs.child.form = JSON.parse(JSON.stringify(obj));
      // this.$refs.child.form = JSON.parse(
      //   JSON.stringify(obj.menus.split(","))
      // );
      // this.$refs.child.form = JSON.parse(JSON.stringify(obj));
      this.popup.flag = true;
      // console.log(this.$refs.child.form);
    },
  },
  components: {
    roleForm,
    roleAdd,
  },
};
</script>

<style scoped lang="scss">
</style>
